<style lang="scss" scoped>
    @import "../utils/base.scss";
    .css1{
        text-align: center;
        height: calc(100vh - 247px);
    }
    .vertical-center-modal{
        display: flex;
        align-items: center;
        justify-content: center;

        .ivu-modal{
            top: 0;
        }
    }
    .button_1{
        height: auto;
        font-size:16px;
        word-wrap: break-word !important;
        word-break: break-all !important;
        white-space: normal !important;
    }

    .ivu-btn{
        font-size: 13px;
    }
    .ivu-transfer-operation .ivu-btn span i, .ivu-transfer-operation .ivu-btn span span{
        line-height: 0px;
    }
    .transfer-list {
        position: relative;
        line-height: 1.5;
        display: inline-block;
        width: 250px;
        height: 400px;
        font-size: 14px;
        vertical-align: middle;
        position: relative;
        padding-top: 35px;
    }
    .transfer-list-header{
        padding: 8px 16px;
        background: #f9fafc;
        color: #515a6e;
        border: 1px solid #dcdee2;
        border-bottom: 1px solid #e8eaec;
        border-radius: 6px 6px 0 0;
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
    .transfer-list-body{
        height: 100%;
        border: 1px solid #dcdee2;
        border-top: none;
        border-radius: 0 0 6px 6px;
        position: relative;
        overflow: hidden;
    }
    .transfer-operation {
        display: inline-block;
        margin: 0 16px;
        vertical-align: middle;
    }
    .transfer-list-body-with-search{
        padding-top: 34px;
    }
    .transfer-list-body-content{
        padding: 6px 0 0;
        height: 100%;
        padding: 4px 0;
        overflow: auto;
    }
    .transfer-list-content-item:hover {
        background: #f3f3f3;
    }
    .transfer-list-content-not-found{
        display: block;
        text-align: center;
        color: #c5c8ce;
    }
    .transfer-list-content-item {
        margin: 0;
        line-height: normal;
        padding: 7px 16px;
        clear: both;
        color: #515a6e;
        font-size: 14px !important;
        white-space: nowrap;
        list-style: none;
        cursor: pointer;
        transition: background 0.2s ease-in-out;
    }
    .transfer-list-body-search-wrapper {
        padding: 8px 8px 0;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;

    }
    .containers{
        position: absolute;
        background-color: #ffffff;
        width: 100%;
        height: 800px;
    }
    .canvas{
        width: 100%;
        height: 100%;
    }

</style>
<template>
    <div style="height:calc(100vh - 94px);background-color:#FFFFFF;">
        <div class="qheader" >
            <p>工单审批管理</p>
        </div>
        <div class="gcontent" style="margin-bottom: 0px;">
            <Form name="activityinfo" :label-width="140" label-position="left" class="form form_left input">
                <Row>
                    <Col span="8" >
                        <FormItem label="选择配置工单:" style="margin-bottom: 0px;">
                            <Select v-model="checkType"  @on-change="searchType">
                                <template v-for="item in processType">
                                    <Option :value="item.processKey">{{item.processName}}</Option>
                                </template>
                            </Select>
                        </FormItem>
                    </Col>
                </Row>
            </Form>
        </div>
        <div class="qheader" >
            <p>审批授权 / {{checkTypeName}}</p>
        </div>
        <div style="height:calc(100vh - 247px);overflow:auto;position: relative;">
            <div class="containers" ref="content">
                <div class="canvas" id="canvas" ref="canvas"></div>
            </div>
            <!-- 设置基础信息 -->
            <Modal
                :styles="{top: '50px'}"
                :loading="submintLoading"
                :mask-closable="false"
                width="60%"
                :title="modalTitle"
                scrollable
                v-model="showSetModal"
                @on-ok="save" @on-cancel="setChangeStatus">
                <div style="position: relative;" v-if="showSetModal">
                    <Form name="leftList" :label-width="140" label-position="left" class="form form_left input">
                        <div style="padding-top:10px;padding-left: 20px;">
                            <Row >
                              <Col span="8" >
                                <FormItem label='节点归属标签：'>
                                    <Input v-model="rightList.sumName" />
                                </FormItem>
                              </Col>
                            </Row>
                            <Row >
                                <Col span="22" >
                                    <FormItem label='消息通知对象:'>
                                        <CheckboxGroup v-model="checkMsgTypeList" v-for="(item,index) in msgTypeList" :key="index" @on-change="setMsg">
                                            <Checkbox  :label="item.index" :disabled="checkMsgTypeList.indexOf(0) > -1 && item.index != 0">
                                                <span>{{item.name}}</span>
                                            </Checkbox>
                                            <div v-if="item.index == 4 && checkMsgTypeList.indexOf(4) > -1" style="width: 300px;padding-left: 20px">
                                                <inputSearch ref="inputSearch" :isSysUser="false" :dataList="checkUserList" :checkLable="checkUserId" @on-change="checkUser"></inputSearch>
                                            </div>
                                            <div v-if="item.index == 5 && checkMsgTypeList.indexOf(5) > -1" style="width: 300px;padding-left: 20px">
                                                <Select v-model="checkRoleId" filterable multiple>
                                                    <Option v-for="item in allRole" :value="item.id" :key="item.value">{{ item.role_name }}</Option>
                                                </Select>
                                            </div>
                                        </CheckboxGroup>
                                    </FormItem>
                                </Col>
                            </Row>
                            <template  v-if="rightList.isAssign != 'noPeople' ">
                                <template v-if="rightList.isAssign == 'delegate_assign' ">
                                  <Row >
                                      <Col span="8" >
                                          <FormItem label='任务超时时间：'>
                                              <Input v-model="rightList.dayLimit" />
                                          </FormItem>
                                      </Col>
                                      <Col span="4"  style="padding-left:10px;font-size:16px;height:36px;display: flex;align-items: center;">
                                          天
                                      </Col>
                                  </Row>

                                  <Row >
                                      <Col span="24" style="word-wrap: break-word !important;word-break: break-all !important; white-space: normal !important;">
                                          <FormItem label='审批角色:'>
                                              <Tag v-if="rightList.candidateRoles.length > 0" v-for="(i1,k) in rightList.candidateRoles"
                                                  :key="k" :name="i1.id" closable @on-close="delRole('candidateRoles',k)">{{i1.roleName}}</Tag>
                                              <Button type="primary" @click="setRole('candidateRoles')" size="small"><Icon type="ios-add" style="line-height: 8px;padding-right:8px;"/>添加角色</Button>
                                          </FormItem>
                                      </Col>
                                  </Row>
                                  <Row>
                                      <Col span="24" style="word-wrap: break-word !important;word-break: break-all !important; white-space: normal !important;" >
                                          <FormItem label='审批人员:' prop="nextOperator">
                                              <Tag v-if="rightList.candidateUsers.length > 0" v-for="(i1,k1) in rightList.candidateUsers"
                                              :key="k1" :name="i1.userName" closable @on-close="delUser('candidateUsers',k1)">{{i1.userName}}</Tag>
                                              <Button type="primary" size="small" @click="setUser('candidateUsers')"><Icon type="ios-add" style="line-height: 8px;padding-right:8px;"/>添加人员</Button>
                                          </FormItem>
                                      </Col>
                                  </Row>
                                </template>
                                <!-- 转办 -->
                                  <Row >
                                      <Col span="24" style="word-wrap: break-word !important;word-break: break-all !important; white-space: normal !important;">
                                          <FormItem label='转办角色:'>
                                              <Tag v-if="rightList.complaintRoles != null && rightList.complaintRoles.length > 0" v-for="(i1,k) in rightList.complaintRoles"
                                                  :key="k" :name="i1.id" closable @on-close="delRole('complaintRoles',k)">{{i1.roleName}}</Tag>
                                              <Button type="primary" @click="setRole('complaintRoles')" size="small"><Icon type="ios-add" style="line-height: 8px;padding-right:8px;"/>添加角色</Button>
                                          </FormItem>
                                      </Col>
                                  </Row>
                                  <Row>
                                      <Col span="24" style="word-wrap: break-word !important;word-break: break-all !important; white-space: normal !important;" >
                                          <FormItem label='转办人员:' prop="nextOperator">
                                              <Tag v-if="rightList.complaintUsers != null  && rightList.complaintUsers.length > 0" v-for="(i1,k1) in rightList.complaintUsers"
                                              :key="k1" :name="i1.userName" closable @on-close="delUser('complaintUsers',k1)">{{i1.userName}}</Tag>
                                              <Button type="primary" size="small" @click="setUser('complaintUsers')"><Icon type="ios-add" style="line-height: 8px;padding-right:8px;"/>添加人员</Button>
                                          </FormItem>
                                      </Col>
                                  </Row>
                            </template>
                            <Row v-if="showSetModal">
                                <Col span="24" style="word-wrap: break-word !important;word-break: break-all !important; white-space: normal !important;" >
                                    <FormItem label='附件模板:' prop="nextOperator">
                                        <!-- <Tag v-if="rightList.files != undefined" v-for="(i1,k1) in rightList.files"
                                        :key="k1" :name="i1.userName" closable @on-close="delFiles"><span >{{i1.fileName.length > 30 ? i1.fileName.substring(0,30)+'...':i1.fileName}}</span></Tag>
                                        <Upload :action="fileUrl + '/post/req_appendix'" :before-upload="beforeUpload" :show-upload-list="false" :headers="httpHeader" :on-success="handleUpload" >
                                            <Button type="primary" size="small"><Icon type="ios-cloud-upload-outline" style="line-height: 8px;padding-right:8px;"/>上传模板</Button>
                                        </Upload> -->
                                        <fileUploader ref="fileUploader" v-model="rightList.files" :buttonSize="'small'"></fileUploader>
                                    </FormItem>
                                </Col>
                            </Row>
                        </div>
                    </Form>
                    <Spin size="large" fix v-if="loadingSpin"></Spin>
                </div>
            </Modal>
            <!-- 人员授权 -->
            <Modal
                :mask-closable="false"
                width="710"
                title="人员授权"
                scrollable
                v-model="modal"
                class-name="vertical-center-modal" @on-ok="addUser" @on-cancel="setChangeStatus">
                <Row style="padding-top: 10px">
                  <transfer v-if="modal" v-model="rightInfoList" :title="title"></transfer>
                </Row>
            </Modal>
            <!-- 角色授权 -->
            <Modal width="710"
                :mask-closable="false"
                title="角色授权"
                scrollable
                v-model="modal2"
                class-name="vertical-center-modal" @on-ok="addRole">
                <Row style="padding-top: 10px">
                    <Transfer
                        filterable
                        :filter-method="searchRole"
                        :data="allRole"
                        :target-keys="roleKey"
                        :list-style="listStyle"
                        :render-format="render2"
                        :operations="['移除','新增']"
                        @on-change="handleChange2">
                    </Transfer>
                </Row>
            </Modal>
        </div>

    </div>
</template>

<script>
    import ajax from "../ajax_util"
    import transfer from '../base/transfer'
    import inputSearch from '../base/input_search'
    import fileUploader from '../base/file_uploader.vue'

    import BpmnViewer from 'bpmn-js'
    import Modeling from 'bpmn-js/lib/features/modeling/Modeling'
    export default {
        name: "processSet",
        components: {
            transfer,inputSearch,fileUploader
        },
        data() {
            return {
                title: ["未授权","已授权"],
                roleType: "",           // 配置角色类型，审批、转办
                userType: "",           // 配置用户，审批、转办
                submintLoading: true,
                taskId: "",             //编辑的节点id
                showSetModal: false,    //显示节点信息编辑对话框
                modalTitle: "",         //节点信息编辑title
                bpmnXml: "",            //加载的bpmn
                bpmnViewer: null,
                checkType: "",          //选择的流程类型
                checkTypeName: "",      //工单名称

                loadingSpin: false,
                checkRoleId:[],
                checkMsgTypeList:[],
                checkUserId: [],
                checkUserList: [], // 选择通知用户list
                msgTypeList: "",  //通知消息类型
                leftNotFindMsg: "列表为空",
                leftCheckAll: false,    //左边全选按钮
                leftCheckList: [],       //左边选择集合
                leftInfoList: [],        //左边数据集合
                leftInput: "",          //左边搜索值

                rightCheckAll: false,   //右边全选按钮
                rightCheckList: [],     //右边选择集合
                rightInfoList: [],      //右边数据集合
                rightInput: "",         //右边搜索值
                rightInfoListTemp: [],   //右边选择框原始数据
                temp: "",

                httpHeader:  {
                    Authorization: this.$store.state.token
                },
                fileUrl: this.CONFIG.file_url,
                names:"",
                openName:[],
                processType:[],
                buttonWidth: '250px',
                leftWidth: '100%',
                rightWidth: '0%',
                auto: '',
                height: '',
                showRight: false,   //是否现在右边
                leftList:[],        //左边边内容得list
                rightList:{},       //右边
                checkIndex: "",     //选择的步骤index

                modal:false,

                listStyle: {
                    width: '285px',
                    height: 'calc(100vh - 320px)'
                },
                modal2: false,
                targetKeys:[],
                searchData: [],
                allRole: [],     //角色左边边
                roleKey:[],     //角色右边
                transfer:true,
            }
        },

        created:function () {
            this.names = this.$route.query.pname
            this.openName = this.$route.query.openName
            this.getAllProcess()
            this.getAllMsgType()
            // this.getProcess()
            this.getAllRole()
        },
        methods: {
            beforeUpload(file){
                console.log(file.name)
                if(file.name.length > 90){
                    this.$Message.warning({
                        content: "上传失败！附件名称太长，请控制在90个字符以内！",
                        duration: 3
                    })
                    return false
                }else{
                    return true
                }
            },
            searchRole(data, query){
                console.log(data, query)
                if(query != ''){
                    if(data.role_name.indexOf(query) > -1 ){
                        return data
                    }
                }else{
                    return data
                }
            },
            // 获取所有的工单serviceType
            getAllProcess(){
                var url = this.CONFIG.base_url_test + "/acti-servicesAll"
                var that=this;
                ajax.get({
                    url: url,
                    that: that,
                    params: null,
                    success:function(data){
                        data.forEach(i => {
                            that.processType.push({
                                processKey: i.serviceType,
                                processName: i.depname
                            })
                        });
                        if(data.length > 0){
                            that.searchType(data[0].serviceType)
                        }
                    }
                })
            },
            // 选择对应的工单设置
            searchType(type){
                this.processType.some(item => {
                    if(item.processKey === type){
                        this.checkType = item.processKey
                        this.checkTypeName = item.processName
                        return
                    }
                });
                this.getBpmn(type)
            },
            getBpmn(type){
                var that=this;
                var url=this.CONFIG.base_url_test + '/bpmn-news/' + type;
                ajax.get({
                    url:url,
                    that:that,
                    success:function(data){
                        that.bpmnXml = data
                        that.setBpmn()
                    }
                })
            },
            setBpmn(){
                if(this.bpmnViewer == null){
                    this.bpmnViewer = null
                }
                document.getElementById("canvas").innerHTML="";
                const canvas = this.$refs.canvas
                this.bpmnViewer = new BpmnViewer ({
                    container: canvas,
                });
                this.createNewDiagram();
            },
            createNewDiagram() {
                var that = this
                const bpmnXmlStr = this.bpmnXml
                this.bpmnViewer.importXML(bpmnXmlStr, function (err) {
                    if (err) {
                        that.$Notice.error({
                            title: '访问数据不存在',
                            desc:  "获取工单流程图失败！",
                            duration: 3,
                        });
                        console.error(err);
                    }else {
                        const canvas = that.bpmnViewer.get('canvas');
                        canvas.zoom('fit-viewport');
                        that.success()
                    }
                })
            },
            success() {
                this.addBpmnListener(this);
            },
            // 给节点添加监听时间(点击)
            addBpmnListener(_self) {
                console.log("--------------")
                const bpmnjs = this.bpmnViewer;
                const eventBus = bpmnjs.get('eventBus');
                const events = [
                    'element.click',
                    'element.dblclick'
                ];
                events.forEach(function(event) {
                    eventBus.on(event, function(e) {
                        console.log("e.element.type---->",e.element.type)
                        if(e.element.type === 'bpmn:UserTask'){
                            const elementRegistry = bpmnjs.get('elementRegistry');
                            const shape = elementRegistry.get(e.element.id);
                            _self.nodeCode = shape.businessObject.id;
                            _self.nodeName = shape.businessObject.name;
                            console.log(shape.businessObject.name)
                            _self.showModel(shape.id,shape.businessObject.name)
                        }
                    })
                })
            },
            showModel(taskId, taskName){
                console.log("taskId-------->",taskId,taskName)
                var url = this.CONFIG.base_url_test + "/setting/" + this.checkType + '/'+ taskId
                var that=this;
                ajax.get({
                    url: url,
                    that: that,
                    params: null,
                    success:function(data){
                        console.log(data)
                        if(data.length > 0 && data[0].taskSettings.length > 0){
                            that.rightList = data[0].taskSettings[0]
                            that.rightList.taskKey = taskId
                            that.rightList.serviceType = that.checkType
                            that.checkMsgTypeList = []
                            that.checkUserList = []
                            that.checkUserId = []
                            that.checkRoleId = []
                            if(that.rightList.msgSendNotices != null){
                                that.rightList.msgSendNotices.forEach(item =>{
                                    that.checkMsgTypeList.push(item.msgType)
                                    if(item.msgType == 4 || item.msgType == 5){
                                        that.checkUserId = item.value
                                        that.checkRoleId = item.value
                                    }
                                })
                            }
                            if(that.checkUserId.length > 0){
                                that.getMsgUser(that.checkUserId)
                            }
                            that.showSetModal = true
                            that.modalTitle = that.checkTypeName + ' / ' + taskName
                        }
                    }
                })
            },
            // 获取消息通知用户，作为回显
            getMsgUser(userList){
                var allUserId = {
                    userList: userList,
                    roleList:[]
                }
                if(allUserId.userList.length > 0){
                    var that = this;
                    var url = that.CONFIG.url_know + "/users"
                    ajax.post({
                        url: url,
                        that: that,
                        data: allUserId,
                        success:function(data){
                            that.checkUserList = data
                        }
                    })
                }
            },
            setMsgInfo(){
                this.checkMsgTypeList = []
                this.checkUserList = []
                this.checkUserId = []
                this.checkRoleId = []

                if(this.rightList.msgSendNotices != null){
                    this.rightList.msgSendNotices.forEach(item =>{
                        this.checkMsgTypeList.push(item.msgType)
                        if(item.msgType == 4){
                            if(item.value.length > 0){
                                this.checkUserId = item.value
                                var that = this;
                                var allUserId = {
                                    userList:item.value,
                                    roleList:[]
                                }
                                var url = that.CONFIG.url_know + "/users"
                                ajax.post({
                                    url: url,
                                    that: that,
                                    data: allUserId,
                                    success:function(data){
                                        that.checkUserList = data
                                    }
                                })
                            }
                        }else if(item.msgType == 5){
                            this.checkRoleId = item.value
                        }
                    })
                }
                this.searchData = [];
                this.targetKeys = [];
            },

            setMsg(value){
                console.log(value)
                if(value.indexOf(4) == -1){
                    this.checkUserList = []
                    this.checkUserId = []
                }
                if(value.indexOf(5) == -1){
                    this.checkRoleId = []
                }
                if(value.indexOf(0) != -1){
                    this.checkMsgTypeList = [0]
                    this.checkUserList = []
                    this.checkUserId = []
                    this.checkRoleId = []
                }
            },
            checkUser(list){
                this.checkUserList = list
                var temp = []
                list.forEach(item =>{
                    temp.push(item.id)
                })
                this.checkUserId = temp
            },
            //tansfer显示的值
            setChangeStatus(){
                this.leftCheckAll = false   //左边全选按钮
                this.leftCheckList = []       //左边选择集合
                this.leftInfoList = []        //左边数据集合
                this.leftInput = ""          //左边搜索值

                this.rightCheckAll = false   //右边全选按钮
                this.rightCheckList = []     //右边选择集合
                this.rightInput = ""
                this.rightInfoList = []
                this.rightInfoListTemp = []

                this.checkMsgTypeList = []
                this.checkUserList = []
                this.checkUserId = []
                this.checkRoleId = []
            },
            //获取所有角色
            getAllRole(){
                var that = this
                var url = this.CONFIG.url_know + "/listRoles";
                ajax.get({
                    url:url,
                    that:that,
                    params:null,
                    success:function(data){
                        data.forEach(item =>{
                            item.key = item.id + ""
                            that.targetKeys.push(item.id + "")
                        })
                        that.allRole = data
                    }
                })
            },

            getAllMsgType(){
                var that=this;
                var url = this.CONFIG.base_url_test + "/msgType";
                ajax.get({
                    url:url,
                    that:that,
                    params:null,
                    success:function(data){
                        that.msgTypeList = data
                    }
                })
            },

            delUser(userType,key){
                if(userType == 'candidateUsers'){
                  this.rightList.candidateUsers.splice(key,1)
                }else if(userType == 'complaintUsers'){
                  this.rightList.complaintUsers.splice(key,1)
                }

            },
            delRole(roleType,key){
              if(roleType == 'candidateRoles'){
                this.rightList.candidateRoles.splice(key,1)
              }else if(roleType == 'complaintRoles'){
                this.rightList.complaintRoles.splice(key,1)
              }
            },
            setUser(userType){
                this.userType = userType
                this.rightInfoList = []
                this.rightInfoListTemp = []

                var allUserId = {
                    userList:[]
                }
                console.log( this.rightList.candidateUsers)
                if(userType == 'candidateUsers'){
                  if(this.rightList.candidateUsers != null){
                      this.rightList.candidateUsers.forEach(item => {
                          allUserId.userList.push(item.id)
                      });
                  }
                }else if(userType == 'complaintUsers'){
                  if(this.rightList.complaintUsers != null){
                      this.rightList.complaintUsers.forEach(item => {
                          allUserId.userList.push(item.id)
                      });
                  }
                }

                if(allUserId.userList.length > 0){
                    var that = this;
                    var url = that.CONFIG.url_know + "/users"
                    ajax.post({
                        url: url,
                        that: that,
                        data: allUserId,
                        success:function(data){
                            data.forEach(item =>{
                                that.rightInfoList.push(item)
                                that.rightInfoListTemp.push(item)
                            })
                            that.modal = true
                        }
                    })
                }else{
                  this.modal = true
                }



            },
            render2(row){
                return row.role_name
            },

            // 添加用户
            addUser(){
                if(this.userType == 'candidateUsers'){
                    this.rightList.candidateUsers = []
                    this.rightInfoList.forEach(item =>{
                        this.rightList.candidateUsers.push(
                            {
                                id:item.id,
                                userName: item.user_name
                            }
                        )
                    })
                }else if(this.userType == 'complaintUsers'){
                    this.rightList.complaintUsers = []
                    this.rightInfoList.forEach(item =>{
                        this.rightList.complaintUsers.push(
                            {
                                id:item.id,
                                userName: item.user_name
                            }
                        )
                    })
                }
                this.setChangeStatus()
                this.modal = false
            },
            //保存
            save(){
                this.loadingSpin = true
                // console.log(this.rightList)
                var msgTemp = []
                if(this.checkMsgTypeList.length > 0){
                    this.checkMsgTypeList.forEach(item =>{
                        if(item == 4){
                            msgTemp.push({
                                msgType: item,
                                value: this.checkUserId
                            })
                        }else if(item == 5){
                            msgTemp.push({
                                msgType: item,
                                value: this.checkRoleId
                            })
                        }else{
                            msgTemp.push({
                                msgType: item,
                                value: []
                            })
                        }
                    })
                }
                this.rightList.msgSendNotices = msgTemp
                if(this.rightList.candidateUsers == null){
                    this.rightList.candidateUsers = []
                }
                if(this.rightList.candidateRoles == null){
                    this.rightList.candidateRoles = []
                }
                if(this.rightList.complaintRoles == null){
                    this.rightList.complaintRoles = []
                }
                if(this.rightList.complaintUsers == null){
                    this.rightList.complaintUsers = []
                }
                var temp = [
                    this.rightList
                ]
                var that=this;
                var url= this.CONFIG.base_url_test + "/bpmn-setting";
                this.utils.delay(()=>{
                    ajax.put({
                        url:url,
                        that:that,
                        data:temp,
                        success:function(data){
                            that.$Message.success('保存成功!');
                            that.loadingSpin = false
                            that.showSetModal = false
                            that.submintLoading = false
                            that.$nextTick(()=>{
                                that.submintLoading = true
                            })
                        }
                    })
                },500)
            },
            setRole(roleType){
              this.roleType = roleType
                this.modal2 = true
                this.roleKey = []
                if(roleType == 'candidateRoles'){ //审批
                  if(this.rightList.candidateRoles != null){
                      for (let index = 0; index < this.rightList.candidateRoles.length; index++) {
                          var item = this.rightList.candidateRoles[index];
                          this.roleKey.push(item.id + '')
                      }
                  }
                }else if(roleType == 'complaintRoles'){ //转办
                  if(this.rightList.complaintRoles != null){
                      for (let index = 0; index < this.rightList.complaintRoles.length; index++) {
                          var item = this.rightList.complaintRoles[index];
                          this.roleKey.push(item.id + '')
                      }
                  }
                }
                console.log("roleKey------->",this.roleKey)
            },
            handleChange2(newTargetKeys){
                this.roleKey = newTargetKeys;
            },
            // 添加角色
            addRole(){
              if(this.roleType == 'candidateRoles'){
                this.rightList.candidateRoles = []
                this.roleKey.forEach(item =>{
                    this.allRole.forEach(i => {
                        if(item == i.id +''){
                            this.rightList.candidateRoles.push({
                                id: i.id,
                                roleName: i.role_name
                            })
                        }
                    });
                })
              }else if(this.roleType == 'complaintRoles'){
                this.rightList.complaintRoles = []
                this.roleKey.forEach(item =>{
                    this.allRole.forEach(i => {
                        if(item == i.id +''){
                            this.rightList.complaintRoles.push({
                                id: i.id,
                                roleName: i.role_name
                            })
                        }
                    });
                })
              }
            },

            //上传
            handleUpload(response, file, fileList){
                if(this.rightList.files === null){
                    this.rightList.files = []
                }
                this.rightList.files.push({
                    fileUrl: response,
                    fileName:  file.name
                })
                fileList = []
            },
            // 删除文件
            delFiles(event,index){
                this.rightList.files.splice(index, 1);
            },
        }
    }
</script>
